body {
    font-family: "Lato", sans-serif;
}

/* ———————————————————————————————————下面是导航栏的样式————————————————————————————————————— */
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #bacac6;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* 消除当导航栏平滑关闭时导航栏里面的字会自己根据导航栏大小重新排列的问题 */
#mySidenav {
    /* 会隐藏超出元素框的内容 */
    overflow: hidden;
    /* 会防止文本自动换行。 */
    white-space: nowrap;

}

/* ———————————————————————————————————下面是主页面————————————————————————————————————— */
#main {
    /* 这行代码定义了一个过渡效果，当元素的 margin-left 属性值改变时，过渡效果会在0.5秒内平滑地进行。这可以用来创建动画效果，
    例如，当你改变元素的 margin-left 值时，元素不会立即移动，而是会在0.5秒内平滑地移动到新的位置。 */
    transition: margin-left .5s;
    /* 这行代码设置了元素的内边距为20像素。内边距是元素的内容和其边框之间的空间。 */
    padding: 20px;
    height: 100vh;

}



/* ————————————————————————————————————下面是卡片效果的样式———————————————————————————————————— */
/* 定义卡片样式 */
.card {
    position: relative;
    margin-top: 5vh;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    width: 100%;
    height: 80%;
    border-radius: 35px;
}

/* 鼠标悬停在卡片上时添加阴影 */
.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

/* 容器，用于存放卡片的内容 */
.container {
    padding: 2px 16px;
}

/* —————————————————————————————————————下面是右上角的头像———————————————————————————————————————— */
#profile {
    position: absolute;
    top: 0;
    right: 25px;
    margin: 20px;
    border-radius: 50%;

}

/* ———————————————————————————————————————下面是下拉菜单——————————————————————————————————————————— */
#dropdownMenu {
    background-color: #403636;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    /* padding: 12px 16px; */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}